<template>
  <div>
    <el-card class="box-card">
      <!-- 表头 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/authority' }">管理员</el-breadcrumb-item>
          <el-breadcrumb-item>新增管理员</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 用户信息 -->

      <el-form
        :label-position="labelPosition"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="管理员头像" prop="adminHeadImg">
          <el-upload
            :action="upload"
            list-type="picture-card"
            :file-list="fileList"
            :limit="1"
            :on-change="updateHeadchange"
            :on-remove="updateHeadRemovechange"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :class="{updateHead:updateHead}"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <el-form-item label="管理员账号" prop="adminAccount">
          <el-input v-model="ruleForm.adminAccount" style="width:30%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="adminPassword">
          <el-input v-model="ruleForm.adminPassword" style="width:30%" show-password maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="管理员手机号" prop="adminPhone">
          <el-input v-model="ruleForm.adminPhone" style="width:30%" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="选择角色" prop="roleId">
          <el-select v-model="ruleForm.roleId" placeholder="选择角色" style="width:30%">
            <el-option
              v-for="(item,index) in roleList"
              :key="index"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="账号状态" prop="adminStatus">
          <el-radio-group v-model="ruleForm.adminStatus">
            <el-radio :label="1">有效</el-radio>
            <el-radio :label="2">无效</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="账号备注" prop="adminNote">
          <el-input type="textarea" v-model="ruleForm.adminNote" style="width:30%" maxlength="20"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import base from "../api/base.js";
export default {
  data() {
    return {
      roleList: [], //获取角色列表
      updateHead: false, //默认头像状态
      // 上传用户头像
      fileList: [],
      upload: "",
      dialogImageUrl: "",
      dialogVisible: false,
      labelPosition: "left", //居左
      //   from表单验证消息
      ruleForm: {
        adminHeadImg: "",
        adminAccount: "",
        adminPassword: "",
        adminPhone: "",
        roleId: "",
        adminStatus: "",
        adminNote: ""
      },
      rules: {
        adminHeadImg: [
          { required: true, message: "请上传管理员头像", trigger: "" }
        ],
        adminAccount: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
          {
            min:3,
            message: "管理员账号不能小于3个字符",
            trigger: "blur"
          }
        ],
        adminPassword: [
          { required: true, message: "请输入管理员密码", trigger: "blur" },
            {
            min:3,
            message: "管理员密码不能小于3个字符",
            trigger: "blur"
          }
        ],
        adminPhone: [
          { required: true, message: "请输入管理员手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "手机号长度在 11 个字符",
            trigger: "blur"
          }
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "blur" }],
        adminStatus: [
          { required: true, message: "请选择账号状态", trigger: "change" }
        ],
        adminNote: [
          { required: true, message: "请输入账号备注", trigger: "change" }
        ]
      }
    };
  },

  created() {
    setTimeout(() => {
      // 获取管理员id
      if (this.$route.query.adminId) {
        // 获取管理员详情
        this.$http.article
          .addminDetails({ yjAdminId: this.$route.query.adminId })
          .then(res => {
            this.ruleForm = res.result; //回显原数据
            this.fileList.push({ url: res.result.adminHeadImg }); //回显照片
            this.updateHead = this.fileList.length == 1 ? true : false;
          });
      } else {
        this.ruleForm = {
          adminHeadImg: "",
          adminAccount: "",
          adminPassword: "",
          adminPhone: "",
          roleId: "",
          adminStatus: "",
          adminNote: ""
        };
        this.fileList = [];
      }
    });
  },
  // 引入js文件
  mounted() {
    this.upload = base.sq + "/yuanjiu/upload/uploadImg";
    // 获取所有角色列表
    this.$http.article.roleAllList().then(res => {
      this.roleList = res.result;
    });
  },
  methods: {
    backMessage() {
      console.log("回复消息");
    },

    // 弹窗信息
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // 如果值匹配请求接口
        if (valid) {
          if (this.$route.query.adminId) {
            var key = "adminId";
            var value = this.$route.query.adminId;
            this.ruleForm[key] = value;
            console.log(this.ruleForm);
            this.$http.article.roleAddAdmin(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.$router.push("/home/authority");
              } else {
                this.$message.error(res.msg);
              }
            });
            return;
          } else {
            this.$http.article.roleAddAdmin(this.ruleForm).then(res => {
              console.log("提交信息后台管理员信息", res);
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.$router.push("/home/authority");
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          // this.$message.error("请求数据为空");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.updateHead=false;
      this.fileList = [];
      this.$refs[formName].resetFields();
    },
    // 用户上传头像
    handleAvatarSuccess(file) {
      this.ruleForm.adminHeadImg = file.result;
      console.log("上传成功获取图片地址", file.result);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传移出事件
    updateHeadRemovechange(file, fileList) {
      this.updateHead = fileList.length >= 1;
    },
    // 图片上传change事件
    updateHeadchange(file, fileList) {
      this.updateHead = fileList.length >= 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  //   overflow: hidden;
}
.box-card {
  //   display: flex;
  //   justify-content: center;
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
.size {
  vertical-align: middle;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
.updateHead::v-deep .el-upload--picture-card {
  display: none;
}
</style>